<template>
  <div class="background-map">
    <div class="background-map-alarm" v-show="showAlarm"></div>
    <div class="background-map-fault" v-show="showFault"></div>

    <div id="container"></div>
    <!-- 谷歌地图标点 -->
    <div
      class="infoWindow-body alarmWindow"
      style="color: #000"
      ref="googleInfoWindow"
      v-if="isGoogle && deviceInfo"
    >
      <div class="infoWindow-list">
        <div class="row sn">
          <span class="label">{{ t(`module.table.Name`) }}：</span>
          <span class="content" style="font-size: 20px">{{
            deviceInfo.name
          }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Sn`) }}：</span>
          <span class="content">{{ deviceInfo.sn }}</span>
          <!-- <span class="label">{{ t(`module.table.Name`) }}：</span>
          <span class="content">{{ deviceInfo.name }}</span> -->
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Room`) }}：</span>
          <span class="content">{{ deviceInfo.room_no }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Address`) }}：</span>
          <span class="content">{{ deviceInfo.address }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.ContactPerson`) }}：</span>
          <span class="content">
            {{ deviceInfo.emergency_contact_name }}
            {{ deviceInfo.emergency_contact_mobile }}
          </span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Status`) }}：</span>
          <span class="content">
            {{
              deviceInfo.alarm_status == 1
                ? t(`module.table.Alarm`)
                : t(`module.table.Fault`)
            }}
          </span>
        </div>

        <div class="row">
          <span class="label">{{ t(`module.table.AlarmTime`) }}</span>
          <span class="content">{{ currentNotice.created_at }}</span>
        </div>
      </div>
    </div>

    <div
      class="infoWindow-body alarmWindow"
      style="color: #000"
      ref="googleInfoWindowSensor"
      v-if="deviceInfo.info && isGoogle"
    >
      <div class="infoWindow-list">
        <div class="row sn">
          <span class="label">
            <img
              v-if="!currentNotice.id"
              style="width: 40px"
              :src="
                deviceInfo.status == 1
                  ? 'https://sg.change90.com/resource/alarm.png'
                  : 'https://sg.change90.com/resource/fault.png'
              "
            />
            <span class="label" v-else>{{ t(`module.table.Name`) }}：</span>
          </span>
          <span class="content" style="font-size: 20px">{{
            deviceInfo.name
          }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Sn`) }}：</span>
          <span class="content">{{ deviceInfo.info.sn }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Room`) }}：</span>
          <span class="content">{{ deviceInfo.area_name }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Address`) }}：</span>
          <span class="content">{{ deviceInfo.info.address }}</span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.ContactPerson`) }}：</span>
          <span class="content">
            {{ deviceInfo.info.emergency_contact_name }}
            {{ deviceInfo.info.emergency_contact_mobile }}
          </span>
        </div>
        <div class="row">
          <span class="label">{{ t(`module.table.Status`) }}：</span>
          <span class="content">
            {{
              deviceInfo.info.alarm_status == 1
                ? t(`module.table.Alarm`)
                : t(`module.table.Fault`)
            }}
          </span>
        </div>

        <div class="row">
          <span class="label">{{ t(`module.table.AlarmTime`) }}</span>
          <span class="content">{{ currentNotice.created_at }}</span>
        </div>
      </div>
    </div>

    <!-- 非谷歌地图 -->
    <div
      v-if="!isGoogle"
      v-show="showDiv && !isGoogle"
      ref="infoWindow"
      class="BMap_bubble_pop"
      style="
        padding: 0px 8px;
        position: absolute;
        cursor: default;
        border: 1px solid rgb(221, 221, 221);
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        overflow: scroll;
      "
    >
      <div class="BMap_bubble_top" style="height: 31px">
        <div
          class="BMap_bubble_title"
          style="
            line-height: 30px;
            overflow: hidden;
            height: 30px;
            white-space: nowrap;
            color: rgb(51, 51, 51);
          "
        ></div>
        <div class="BMap_bubble_buttons">
          <div
            style="
              cursor: pointer;
              width: 32px;
              height: 30px;
              color: #ccc;
              float: right;
            "
            @click="closeInfoWindow"
          >
            X
          </div>
        </div>
      </div>
      <div
        class="BMap_bubble_center"
        style="z-index: 3; position: relative; height: 150px; width: 300px"
      >
        <div
          class="BMap_bubble_content"
          style="
            font-size: 14px;
            line-height: 24px;
            position: absolute;
            top: 2px;
            color: rgb(85, 85, 85);
            width: 300px;
            height: 150px;
            overflow: auto;
          "
        >
          <div class="infoWindow-body alarmWindow" id="infowindow">
            <ul class="infoWindow-list">
              <li>
                <div class="infoWindow-tit">{{ t(`module.table.Sn`) }}</div>
                <span class="infoWindow-txt deviceType" title="">
                  {{ deviceInfo.sn }}</span
                >&nbsp;
                <!-- <i
                class="el-icon-document-copy tabLink"
                title="复制IMEI"
                onclick="copySuccess('863318060696558')"
              ></i> -->
              </li>
              <li>
                <div class="infoWindow-tit">{{ t(`module.table.Room`) }}</div>
                <div class="infoWindow-txt deviceType">
                  {{ deviceInfo.room_no }}
                </div>
              </li>
              <li>
                <div class="infoWindow-tit">
                  {{ t(`module.table.Address`) }}：
                </div>
                <div class="infoWindow-txt deviceType">
                  {{ deviceInfo.address }}
                </div>
              </li>
              <li>
                <div class="infoWindow-tit">
                  {{ t(`module.table.ContactPerson`) }}：
                </div>
                <div class="infoWindow-txt">
                  {{ deviceInfo.emergency_contact_name }}
                  {{ deviceInfo.emergency_contact_mobile }}
                </div>
              </li>
              <li>
                <div class="infoWindow-tit">
                  {{ t(`module.table.Status`) }}：
                </div>
                <span class="infoWindow-txt alarmColor">{{
                  deviceInfo.alarm_status == 1
                    ? t(`module.table.Alarm`)
                    : t(`module.table.Fault`)
                }}</span>
              </li>

              <!-- <li>
                <div class="infoWindow-tit">
                  {{ t(`module.table.AlarmTime`) }}：
                </div>
                <div class="infoWindow-txt">门磁GN1011111</div>
              </li> -->
              <li>
                <div class="infoWindow-tit">
                  {{ t(`module.table.AlarmTime`) }}：
                </div>
                <div class="infoWindow-txt">{{ currentNotice.created_at }}</div>
              </li>
              <br />
              <div class="clearfix"></div>
            </ul>
          </div>
        </div>
      </div>
      <div
        class="BMap_bubble_bottom"
        style="display: block; z-index: 2; position: absolute; width: 400px"
      ></div>
    </div>
    <audio id="audio" loop style="display: none">
      <source src="https://sg.change90.com/resource/alarm.mp3" />
    </audio>
  </div>
</template>

<script>
import API from "api";
import {
  toRefs,
  reactive,
  getCurrentInstance,
  onMounted,
  ref,
  nextTick,
  watch,
} from "vue";
import { useAMap } from "@/hooks/useAMap";
import { useGoogleMap } from "@/hooks/useGoogleMap";
import { useEventbus } from "@/hooks/useEventBus.js";
import { useI18n } from "vue-i18n";
var timer;

export default {
  name: "backgroundMap",
  props: {
    showAlarmRecords: {
      type: Boolean,
      default: () => false,
    },
    selectedNotice: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    const { t } = useI18n();
    const { proxy } = getCurrentInstance();
    const {
      initMap,
      addMarkersToMap,
      createMarkers,
      setMapCenter,
      changeMarkerStatus,
      alertInfoWindow,
      closeInfoWindow,
    } = useGoogleMap("container", proxy);
    const infoWindow = ref(null);
    const googleInfoWindow = ref(null);
    const googleInfoWindowSensor = ref(null);
    const state = reactive({
      showDiv: false,
      deviceInfo: {},
      isGoogle: true,
      currentNotice: {},
      showAlarm: false,
      showFault: false,
    });
    const eventBus = useEventbus();
    // 报警
    eventBus.emitterOn("AlarmMessage", (e) => {
      const audio = document.getElementById("audio");
      state.currentNotice = {};
      alarm(e);
      if (e.type == 1) {
        timer = null;
        state.showAlarm = true;
        audio.play();
        timer = setTimeout(() => {
          state.showFault = false;
          state.showAlarm = false;
          audio.pause();
        }, 10000);
      } else if (e.type == 2) {
        timer = null;
        audio.play();
        state.showFault = true;
        timer = setTimeout(() => {
          audio.pause();
          state.showFault = false;
          state.showAlarm = false;
        }, 10000);
      }
      state.deviceInfo.alarm_status = 1;
      state.deviceInfo.alarm_time = e.created_at;
    });
    // 故障
    eventBus.emitterOn("FaultMessage", (e) => {
      alarm(e);
      state.deviceInfo.alarm_status = 2;
      state.deviceInfo.alarm_time = e.created_at;
    });
    onMounted(async () => {
      await initMap();
      API.markers().then((res) => {
        if (res.code == 0) {
          let list = res.data;
          let counter = 0;
          if (list.length > 0) {
            list.forEach((item) => {
              if (item.lng != "") {
                counter += 1;
                createMarkers(item);
              }
            });
            if (counter > 0) {
              addMarkersToMap();
            }
          }
        }
      });
    });
    const handleMarkerClick = (item) => {
      setMapCenter(item, 15);
      API.deviceInfo({ sn: item.sn }).then((res) => {
        state.deviceInfo = res.data;
        state.currentNotice.created_at = res.data.alarm_time;
        setTimeout(() => {
          alertInfoWindow(item, googleInfoWindow.value, "marker");
          // alertInfoWindow(item, infoWindow.value);
        }, 1000);
      });
    };

    watch(
      () => props.selectedNotice,
      (val) => {
        console.log("val===", val);
        state.currentNotice = val;
        if (val && val.sn) {
          // let markerInfo = window.markerInfo[val.sn]
          alarm(val);
        } else {
          closeInfoWindow();
        }
      }
    );

    const alarm = (item) => {
      let markerInfo = {};
      if (!window.markerInfo || !window.markerInfo[item.sn]) {
        createMarkers(item);
        markerInfo = item;
      } else {
        markerInfo = window.markerInfo[item.sn];
      }

      nextTick(() => {
        setMapCenter(
          {
            lng: markerInfo.lng,
            lat: markerInfo.lat,
            sn: item.sn,
          },
          15
        );
        changeMarkerStatus(item);
        nextTick(() => {
          if (item.sensor_id) {
            state.currentNotice.created_at = item.created_at;
            API.childDeviceInfo({
              sn: item.sn,
              id: item.sensor_id,
              from: "cms",
            }).then((res) => {
              state.deviceInfo = res.data;
              console.log(res.data, "device");
              setTimeout(() => {
                // alertInfoWindow(
                //   markerInfo,
                //   googleInfoWindowSensor.value,
                //   "notice"
                // );
                alertInfoWindow(markerInfo, infoWindow.value);
              }, 1000);
            });
          } else {
            API.deviceInfo({ sn: item.sn }).then((res) => {
              state.deviceInfo = res.data;
              console.log(res.data);
              setTimeout(() => {
                alertInfoWindow(markerInfo, googleInfoWindow.value, "notice");
              }, 1000);
            });
          }
        });
      });
    };
    return {
      t,
      infoWindow,
      googleInfoWindow,
      googleInfoWindowSensor,
      handleMarkerClick,
      closeInfoWindow,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.background-map-alarm {
  position: fixed;
  width: 30vw;
  height: 18vw;
  overflow: hidden;
  border-radius: 5px;
  // box-shadow: 1px 2px 7px #3b3b3b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe-alarm;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
.background-map-fault {
  position: fixed;
  width: 30vw;
  height: 18vw;
  overflow: hidden;
  border-radius: 5px;
  // box-shadow: 1px 2px 7px #3b3b3b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe-alarm;
  -webkit-animation-duration: 1000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@-webkit-keyframes breathe-alarm {
  0% {
    opacity: 0.2;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    border: 1px solid rgba(255, 0, 0, 1);
    box-shadow: 0 1px 30px rgba(255, 0, 0, 1);
  }
}

@-webkit-keyframes breathe-fault {
  0% {
    opacity: 0.2;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    border: 1px solid rgba(255, 128, 0, 1);
    box-shadow: 0 1px 30px rgba(255, 128, 0, 1);
  }
}
.background-map {
  width: 30vw;
  height: 18vw;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 1px 2px 7px #3b3b3b;

  #container {
    width: 100%;
    height: 100%;
  }
}
.alarmWindow {
  .row {
    display: flex;
    width: 100%;
    font-size: 10px;
    padding: 5px 0;
    .label {
      box-sizing: border-box;
      display: inline-block;
      width: 30%;
      transform-origin: 0 0;
    }
    .content {
      box-sizing: border-box;
      display: inline-block;
      width: 70%;
      max-width: 300px;
      text-align: right;
    }
  }
}
.infoWindow-list {
  padding-bottom: 20px;
}

// 弹窗样式重置
:deep(.gm-style-iw-c) {
  min-width: 200px !important;
  max-width: 30% !important;
  padding: 20px 12px !important;
}
:deep(.gm-ui-hover-effect) {
  top: 0 !important;
  right: 0 !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  border-radius: 50% !important;
  border: none !important;
  text-align: center;

  span {
    display: inline-block !important;
    margin: 0 !important;
  }
}

.sn {
  font-size: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
}
</style>
